<template>
  <div>
    <template>
      <el-upload
        v-if="!isDetails"
        action="/fms/api/upload"
        :before-upload="beforeUpload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :file-list="fileList"
        :data="{ appId: 'app017' }"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-remove="handleRemove"
        :on-exceed="handleExceed"
        :disabled="disable"
        :limit="limit"
        :multiple="multiple"
        :accept="accept"
      >
        <i class="el-icon-plus" />
        <div v-if="tip" slot="tip" class="el-upload__tip" style="color:#f00">{{ tip }}</div>
      </el-upload>
      <div v-if="isDetails">
        <el-image
          v-for="item in fileList"
          :key="item.fileId"
          class="m-r-10"
          style="width: 100px; height: 100px"
          :src="item.url"
          :preview-src-list="[item.url]"
        />
      </div>
      <el-dialog :visible.sync="dialogVisible" :title="dialogImageTitle" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </template>
  </div>
</template>

<script>
export default {
  name: 'YlImgUpload',
  props: {
    value: {
      type: [Array, String]
    },
    tip: {
      type: String,
      default: ''
    },
    showFileList: {
      type: Boolean,
      default: false
    },
    isDetails: {
      type: Boolean,
      default: false
    },
    fileFormat: {
      type: String,
      default: 'img'
    },
    disable: {
      type: Boolean
    },
    limit: {
      type: Number,
      default: () => {
        return 1
      }
    },
    multiple: {
      type: Boolean,
      default: false
    },
    obj: {
      type: Object
    },
    accept: {
      type: String,
      default: 'image/gif,image/jpeg,image/jpg,image/png'
    },
    size: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogImageTitle: '',
      dialogVisible: false
    }
  },
  methods: {
    clearFileList() {
      this.fileList = []
    },
    addImg() {
      this.clearFileList()
      this.$nextTick(() => {
        if (this.limit !== 1 && this.value) {
          console.log(this.value)
          this.value.forEach((item) => {
            this.fileList.push({
              name: item.fileId,
              code: item.fileId,
              filename: item.name,
              size: item.size,
              regex: item.regex,
              url: '/fms/api/show/' + item.fileId + '_0'
            })
          })
        } else if (this.value) {
          this.fileList.push({
            name: this.value,
            code: this.value,
            url: '/fms/api/show/' + this.value + '_0'
          })
        }
      })
    },
    handleRemove(file, fileList) {
      if (this.limit === 1) {
        this.$emit('input', '')
      } else {
        this.$emit(
          'input',
          fileList.map((data) => ({
            name: data.filename,
            size: data.size,
            regex: data.regex,
            fileId: data.code
          }))
        )
      }
    },
    handleSuccess(response, file, fileList) {
      if (response) {
        file.code = response.body.fileStorage.name
        file.url = '/fms/api/show/' + response.body.fileStorage.name + '_0'
        file.filename = response.body.fileStorage.filename
        file.regex = response.body.fileStorage.suffix
        if (this.limit === 1) {
          this.$emit('input', file.code)
        } else {
          this.$emit(
            'input',
            fileList.map((data) => ({
              name: data.filename,
              size: data.size,
              regex: data.regex,
              fileId: data.code
            }))
          )
        }
      }
    },
    handleError(err, file, fileList) {
      console.log(err, file, fileList)
    },
    handleExceed() {
      this.$message({
        showClose: true,
        message: '最多只能上传' + this.limit + '张图片',
        type: 'error'
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImageTitle = file.name
      this.dialogVisible = true
    },
    beforeUpload(file) {
      const size = this.size
      if (file.size > size * 1024 * 1024) {
        this.$message({
          showClose: true,
          message: '上传文件不能大于' + size + 'M',
          type: 'error'
        })
        return false
      } else {
        return file
      }
    }
  }
}
</script>

<style></style>
